<!-- <template>
  <div class="indicator-chart-container">
    <div class="chart-header">
      <h3 class="title">学校指标分析</h3>
      <div class="filters">
        <el-select 
          v-model="selectedType" 
          placeholder="选择指标类型"
          size="small"
          @change="updateChart">
          <el-option
            v-for="type in filterTypes"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          />
        </el-select>
      </div>
    </div>
    <div class="chart-wrapper">
      <canvas ref="chartCanvas"></canvas>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Ref, Watch } from 'vue-property-decorator';
type DataType = 'number' | 'string' | 'all';
type ChartData = {[key: string]: string | number };

@Component({})
export default class IndicatorChartView extends Vue {
  @Prop({ required: true }) readonly rawData!: ChartData;
  @Ref() readonly chartCanvas!: HTMLCanvasElement;

  private chartInstance: Chart | null = null;
  private selectedType: DataType = 'number';
  private labelMap = {
    code07: '占地面积(㎡)',
    code08: '建筑面积(㎡)',
    code09: '在校学生数',
    code11: '教职工数',
    code12: '专任教师数',
    code23: '危房数量',
    code19: '其他数值指标'
  };

  private filterTypes = [
    { value: 'number', label: '数值指标' },
    { value: 'string', label: '文本指标' },
    { value: 'all', label: '全部指标' }
  ];

  get processedData() {
    return Object.entries(this.rawData)
      .filter(([key, value]) => {
        const isNumber = !isNaN(Number(value));
        if (this.selectedType === 'number') return isNumber;
        if (this.selectedType === 'string') return !isNumber;
        return true;
      })
      .map(([key, value]) => ({
        label: this.labelMap[key] || key.replace('code', '指标'),
        value: isNaN(Number(value)) ? value : Number(value),
        isNumber: !isNaN(Number(value))
      }));
  }

  @Watch('processedData', { deep: true })
  onDataChange() {
    this.updateChart();
  }

  mounted() {
    this.initChart();
  }

  beforeDestroy() {
    this.destroyChart();
  }

  private initChart() {
    if (!this.chartCanvas) return;

    const ctx = this.chartCanvas.getContext('2d');
    if (!ctx) return;

    this.chartInstance = new Chart(ctx, this.getChartConfig());
  }

  private getChartConfig(): any {
    return {
      type: 'bar',
      data: this.getChartData(),
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: (ctx: any) => {
                const label = ctx.dataset.labels[ctx.dataIndex];
                const value = ctx.dataset.data[ctx.dataIndex];
                return ` ${label}: ${this.formatValue(value)}`;
              }
            }
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            display: this.selectedType === 'number',
            title: { display: true, text: '指标数值' }
          },
          x: {
            ticks: {
              autoSkip: false,
              maxRotation: 45,
              minRotation: 45
            }
          }
        }
      }
    };
  }

  private getChartData() {
    return {
      labels: this.processedData.map(d => d.label),
      datasets: [{
        data: this.processedData.map(d => d.isNumber ? d.value : 0),
        backgroundColor: this.processedData.map(d => 
          d.isNumber ? '#409eff' : '#67c23a'
        ),
        borderColor: '#fff',
        borderWidth: 1,
        borderRadius: 4,
        barPercentage: 0.8
      }]
    };
  }

  private formatValue(value: any): string {
    return typeof value === 'number' 
      ? value.toLocaleString() 
      : String(value);
  }

  private updateChart() {
    if (!this.chartInstance) return;

    // 完全销毁重建图表保证更新
    this.destroyChart();
    this.initChart();
  }

  private destroyChart() {
    if (this.chartInstance) {
      this.chartInstance.destroy();
      this.chartInstance = null;
    }
  }
}
</script>

<style lang="scss" scoped>
.indicator-chart-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 20px;

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      margin: 0;
      font-size: 16px;
      color: #303133;
    }

    .filters {
      width: 200px;
    }
}

.chart-wrapper {
  position: relative;
  height: 400px;

  @media (max-width: 768px) {
    height: 300px;
  }
}
}
</style> -->